import { Table } from 'antd';
import 'antd/dist/antd.css'
import { useEffect,useState } from 'react'; 
import studentApi from '../../api/student/student'


function StudentList(){

  let [datas,setDatas] = useState([])
  let [paginationObj,setPaginationObj]=useState(
    {
      
      showSizeChanger:true,
      pageSizeOptions:[2,3,4,5],
      showQuickJumper:true,
      total:1,
       onChange: async function(page, pageSize){
         //console.log(page, pageSize)
         let result= await studentApi.getstudentbypage(page,pageSize) 
         console.log(result.data.datas,"==>>onChange")
          setDatas(result.data.datas);
      }, 
      onShowSizeChange: async function(current, size){
            console.log(current, size)
            let result= await studentApi.getstudentbypage(current,size) 
            console.log(result)
             setDatas(result.data.datas);
             setPaginationObj({
               ...paginationObj,
               total:result.data.totalNum
             })
      }
    }
  )
  //页面挂载完毕获取数据
   useEffect(async ()=>{
        let result = await studentApi.getstudentbypage(1,2);
        console.log(result.data.datas);
        //修改需要显示的数据
        setDatas(result.data.datas)
        //修改分页对象
        setPaginationObj({
           ...paginationObj,
           total:result.data.totalNum
         })
      },[])

  //dataIndex 对应数据中的属性
  //你要显示的列名
  const columns = [
    {
        title: '编号',
        dataIndex: '_id',
        key: '_id',
     },
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '性别',
      dataIndex: 'gender',
      key: 'gender',
    },
    {
        title:'所在班级',
        dataIndex:'classid',
        key:'classid',
        render:(classid)=>{ return classid.name}
      },
      {
        title: 'Action',
        key: 'action',
        render: (text, record) => (
            <>
            <a>查看详细</a>
            &nbsp;&nbsp;
            <a>删除</a>
            </>
           
        ),
      },
  ];



    return(
        <div>
           <Table pagination={paginationObj} dataSource={datas} columns={columns} />;
        </div>
    )
}

export default StudentList